<template>
	<div class="form-control">
		<el-form :model="task" label-width="auto">
			
		   <el-form-item label="阶段名称">
			 <el-select v-model="task.stage" size="large" clearable placeholder="请选择阶段名称">
				  <template v-for=" stage in stageList">
             <el-option :label="stage.name" :value="stage.id"/>
           </template>
			 </el-select>
		   </el-form-item>
		   
		   <el-form-item label="模块名称">
				 <el-select v-model="task.module" size="large" clearable placeholder="请选择模块名称" @click="moduleable">
					  <template v-for=" module in moduleList">
             <el-option :label="module.name" :value="module.id"/>
           </template>
				 </el-select>
		   </el-form-item>
		   
		   <el-form-item label="任务标题">
			 <el-input
				 v-model="task.title"
				 :autosize="{ minRows: 10, maxRows: 80 }"
				 type="textarea"
				 placeholder="请输入任务标题"
			   />
		   </el-form-item>
		   
		   <el-form-item label="难易程度">
			 <el-select v-model="task.level" size="large" clearable placeholder="请选择难易程度">
				  <el-option label="简单题" :value="1" />
				  <el-option label="中等题" :value="2" />
				  <el-option label="难题" :value="3" />
				  <el-option label="选做题" :value="4" />
			 </el-select>
		   </el-form-item>
		 </el-form>
	</div>
</template>

<script>
export default {
	data(){
		return {
			task: {
        title:null,
        stage:null,
        module:null,
        level:null,
      },
      stageList:[],
      moduleList:[],
		}
	},
  created() {
    window.$bus.on("add-Task", this.saveTask);
    this.$api.stageable().then(ret=>{
  		  this.stageList = ret;
  	  })
  },
  methods:{
    moduleable(stage){
      this.$api.moduleable(this.task.stage).then(ret =>{
      this.moduleList = ret;
      })
    },
    // 保存新增的任务
    saveTask(index) {
      if (this.task.name === ""){
        this.$layer.msg("任务名不允许为空");
        return ;
        }
      this.$api.saveTask(this.task).then(ret => {
        // 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
          // 父页面 监听 close-win , 并关闭该窗口
          parent.$bus.emit('close-win-refresh', index);
      })
      }
  }
}
</script>

<style scoped>
.form-control {
	padding: 30px 30px 10px;
}
</style>